<template>
  <view class="m-5">
    <view class="relative-position pb-3">
      <image class="custom-image" src="https://yuexiaoda-1314351529.cos.ap-shanghai.myqcloud.com/exam/vip1.png"></image>
      <view class="overlay-content">
        <view class="d-flex d-flex-between ">
          <view></view>
          <view class="d-flex d-flex-middle">
            <text class="font20 mr-2 expire-text">2026-01-04到期</text>
            <view class="status-container d-flex d-flex-middle ">
              <image class="custom-image1"
                     src="https://yuexiaoda-1314351529.cos.ap-shanghai.myqcloud.com/exam/vip2.png"></image>
              <text class="font24 ml-1 expire-text">未开通</text>
            </view>
          </view>
        </view>
        <view class="ml-4 mt-negative">
          <view class="d-flex d-flex-middle">
            <text class="font30 font-bold font26 mr-3 italic-text">专业名称</text>
            <image class="custom-image2"
                   src="https://yuexiaoda-1314351529.cos.ap-shanghai.myqcloud.com/exam/vip3.png"></image>
          </view>
        </view>
        <view class="d-flex mx-4 d-flex-wrap">
          <view
              v-for="feature in features"
              :key="feature.id"
              class="d-flex d-flex-middle mr-4 mt-2"
          >
            <image
                class="custom-image3"
                src="https://yuexiaoda-1314351529.cos.ap-shanghai.myqcloud.com/exam/vip9.png"
            ></image>
            <text class="font20 ml-1 expire-text">{{ feature.text }}</text>
          </view>
        </view>
      </view>
    </view>

    <view class="font-bold main-color font34 mt-5">5步快速学习</view>

    <view class="">
      <view
          class="d-flex d-flex-between mt-2 d-flex-middle"
          v-for="course in courses"
          :key="course.course_id"
      >
        <view class="d-flex d-flex-item">
          <image class="custom-image4"
                 :src="`https://yuexiaoda-1314351529.cos.ap-shanghai.myqcloud.com/exam/vip${course.course_id+3}.png`"></image>
          <view class="ml-2 d-flex-item mr-5" style="color: rgba(92, 92, 92, 1);">
            <view class="font30 font-bold">{{ course.title }}</view>
            <view class="font24 my-1">{{ course.description }}</view>
            <view class="progress-box">
              <progress :percent="course.progress" font-size="12" stroke-width="6" show-info
                        background-color="rgba(179, 179, 179, 1)"
                        activeColor="rgba(62, 142, 254, 1)"/>
            </view>
          </view>
        </view>
        <view
            class="study-btn font20 continue-btn"
            @click="goUrl(`/subPages/VIP/VIP`)"
        >
          去学习
        </view>
      </view>
    </view>
  </view>
</template>

<script>
import {fileApi} from "@/http/fileApi";
import {mapState} from "vuex"

export default {
  data() {
    return {
      features: [
        {id: 1, text: '精简题'},
        {id: 2, text: '易错题'},
        {id: 3, text: '模拟考试'},
        {id: 4, text: 'AI导题'},
        {id: 5, text: '搜题次数'}
      ],
      // 添加课程数据
      courses: [
        {course_id: 1, title: '整套精髓课', description: '你要的重点都在这里', progress: 20},
        {course_id: 2, title: '核心考点', description: '高频考点精讲', progress: 60},
        {course_id: 3, title: '真题解析', description: '历年真题详解', progress: 40},
        {course_id: 4, title: '章节练习', description: '按章节巩固知识', progress: 80},
        {course_id: 5, title: '考前冲刺', description: '最后冲刺辅导', progress: 10}
      ]
    }
  },
  computed: {
    ...mapState({
      loginState: state => state.loginState
    }),
  },
  onLoad() {
    this.goVipPackages()
  },
  methods: {
    async goVipPackages() {
      let res = await fileApi.getVipPackages()
      console.log(res,'222')
      this.vipPackage = res.data
    },
    goUrl(urlPages, data) {
      if (!this.loginState) {
        uni.showToast({
          title: '未登录，请先登录！',
          icon: 'none'
        })
        setTimeout(() => {
          uni.navigateTo({
            url: '/subPages/login/login'
          })
        }, 1500)
      } else {
        uni.navigateTo({
          url: urlPages
        })
      }
    },
  }
}
</script>

<style scoped>
.relative-position {
  position: relative;
}

.custom-image {
  height: 200rpx;
  width: 100%;
}

.custom-image1 {
  height: 30rpx;
  width: 28rpx;
}

.custom-image2 {
  width: 72rpx;
  height: 44rpx;
}

.custom-image3 {
  width: 20rpx;
  height: 20rpx;
}

.custom-image4 {
  width: 72rpx;
  height: 120rpx;
}

.study-btn {
  padding: 10rpx 20rpx;
  border-radius: 30rpx;
  height: 26rpx;
  line-height: 26rpx;
  font-size: 24rpx;
}

.continue-btn {
  background: #3E8EFF;
  border: 1rpx solid #3E8EFF;
  color: #ffffff;
}


.overlay-content {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  color: white;
}

.status-container {
  background: rgba(255, 255, 255, 0.2);
  height: 40rpx;
  padding: 4rpx 18rpx;
  border-bottom-left-radius: 16rpx;
}

.expire-text {
  color: #cccccc; /* 使用较暗的灰色替代纯白色 */
}

.italic-text {
  font-style: italic;
}

.mt-negative {
  margin-top: -10rpx;
}
</style>
